<template>
	<div class="ui_wrapper">
		<div class="mainWrapper">
			<div class="headerWrapper">
				<Header />
			</div>
			<div class="routerWrapper">
				<router-view />
			</div>
			<div class="footerWrapper">
				<div class="footer">
					<Menu />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import Header from './components/Header.vue';
import Menu from './components/Menu.vue';
</script>
<style lang="scss">
#app {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

#cesiumContainer {
	width: 100%;
	height: 100%;
	pointer-events: all;
}

#ui {
	position: absolute;
	left: 0;
	height: 0;
	user-select: all;
	pointer-events: all;
	width: 100%;
	height: 100%;
	background: transparent;
}

.ui_wrapper {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.cesiumWrapper {
	width: 100vw;
	height: 100vh;
}

.mainWrapper {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	z-index: 90;
	flex-direction: column;
	background: transparent;
	pointer-events: none;
	overflow: hidden;

	.headerWrapper {
		width: 100%;
		height: 200px;
		pointer-events: none;
		overflow: hidden;
	}

	.routerWrapper {
		flex: 1;
		pointer-events: none;
		overflow: hidden;
	}

	.footerWrapper {
		width: 100%;
		height: 200px;
		background: linear-gradient(0deg, #000f1f 0%, #000f1f 0.2%, rgba(0, 15, 31, 0.1) 100%);
		background-blend-mode: normal;
		pointer-events: none;
		overflow: hidden;
	}

	.footer {
		width: 4522px;
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		height: 33px;
		background: transparent;
		background-image: url(/src/assets/bigscreenAssets/底部样式.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
	}
}


#components-layout-demo-top-side-2 .logo {
	float: left;
	width: 120px;
	height: 31px;
	margin: 16px 24px 16px 0;
	background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
	float: right;
	margin: 16px 0 16px 24px;
}

.site-layout-background {
	background: #fff;
}

.ant-layout {
	height: 100%;
	position: relative;
}

.ant-layout-header {
	display: flex;
}

.logo {
	color: #fff;
	font-size: 24px;
	max-width: 200px;
	margin-right: 10px;
}

.content {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	pointer-events: all;
}
</style>